<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <input type="checkbox" id="ck" />
    <hr />
    <div id="div">
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" />
    </div>
</body>

<!-- 引入js -->
<script>

    //定义一个变量记录点击次数
    let count = 0;
    //​1）给最上面的复选框绑定一个点击事件
    let checkboxFist = document.getElementById("ck");
    //获取最上面复选框Checkbox对象
    checkboxFist.onclick = function () {
        if (count % 2 === 0) {
            //第一次点击后选中
            checkboxFist.checked = true;
        } else {
            //第二次点击后取消
            checkboxFist.checked = false;
        }

        //2）当一点击最上面的复选框的时候立刻获取下面所有的复选框
        //获取下面所有复选框对象,使用父标签getElementsByTagName（）获取下面所有子元素
        let arrInputs = document.getElementById("div").getElementsByTagName("input");
        //3）遍历获取下面每个复选框
        for (let i = 0; i < arrInputs.length; i++) {
            //4）将最上面复选框此时checked的值赋值给下面每个复选框
            if (count % 2 === 0) {
                //第一次点击后选中
                arrInputs[i].checked = true;
            } else {
                //第二次点击后取消
                arrInputs[i].checked = false;
            };
        } 
        //每次点击后次数加一
        count++;
    }
</script>

<!-- <script type="text/javascript">
    // 1）给最上面的复选框绑定一个点击事件
    document.getElementById('ck').onclick = function () {
        // 2）当一点击最上面的复选框的时候立刻获取下面所有的复选框
        //this表示调用当前点击事件onclick的标签对象即最上面的复选框对象<input type="checkbox" id="ck" />
        // console.log(this.checked);//被选中，checked的值是true，不被选中，值是false
        let oDiv = document.getElementById('div');
        //下面所有的复选框
        let arrInputs = oDiv.children;
        //3）遍历获取下面每个复选框
        for (let i = 0; i < arrInputs.length; i++) {
            //每个复选框
            let oInput = arrInputs[i];
            //4）将最上面复选框此时checked的值赋值给下面每个复选框
            //this表示最上面复选框的标签对象，this.checked 表示最上面复选框的checked的值
            //最上面复选框的值是什么就将值赋值给下面每个复选框
            oInput.checked = this.checked;
        }
    }
</script> -->

</html>